<template>
	<view class="content">
		<view class="header">
			<!-- 顶部搜索框 -->
			<view class="search" @click="searchArea">
				<u-search :showAction='false' height='40' bgColor='#fff' placeholder="请输入关键字"
					v-model="InquireData"></u-search>
			</view>
			<!-- 导航栏 -->
			<view class="navigation-bar">
				<view class="navigation">
					<u-tabs lineColor='#fff' :inactiveStyle="{color:'white'}"
						:activeStyle="{color: 'white',fontWeight: 'bold',}" :list="navigationData">
						<!-- 导航栏右侧分类 -->
						<view slot="right" class="navigation-classify">
							<u-icon name="grid" color="#fff" size="25"></u-icon>
							<text class="classify">分类</text>
						</view>
					</u-tabs>
				</view>
			</view>
		</view>
		<view class="content-padding">
			<!-- 轮播图 -->
			<view class="carousel">
				<u-swiper :list="carouselData" @click="click" circular></u-swiper>
			</view>
			<!-- 限时活动 -->
			<view class="activity">
				<view class="image-box" v-for="(item,index) in activityData" :key="index"
					@click="menuClikItem(item,index)">
					<img :src="item.src" class="image" alt="" />
					<view>{{ item.font }}</view>
				</view>
			</view>
			<!-- 大额红包 -->
			<view class="red-envelope" @click="rollCollar">
				<image src="../../static/images/redenvelope.png" class="img-radenvelope" mode=""></image>
				<!-- <img src="../" alt="" class="" /> -->
			</view>
			<!-- 商城头条 -->
			<view class="shopping-centre" @click="consulting">
				<text class="mall-headlines">商城 <text class="headlines">头条</text></text>
				<text>|</text>
				<text>B2B2C演示小程序请勿下单</text>
				<u-icon name="arrow-right" size="20" class="shopping-right-icon"></u-icon>
			</view>
			<!-- 超值秒杀 -->
			<view class="great-spikes">
				<view class="spikes-title">
					<text class="value-spikes">超值秒杀</text>
					<text class="ended">已结束</text>
				</view>
				<view class="spikes-content">
					<view class="conatent-box" v-for="(item,index) in spiketimeData" :key="index"
						@click="spikes(index)">
						<view class="spikes-time" :class="state == index? 'spikex-time' : '' ">{{ item.time }}</view>
						<view class="spikes-come" :class="state == index?'come':''">已结束</view>
					</view>
				</view>
				<u-line type="info"></u-line>
				<view class="spikes-bottom" @click="greatSpikes">
					<text>查看更多</text>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
			</view>
			<!-- 热销榜单 -->
			<view class="hot-list">
				<view class="hot-list-title">
					<text class="hot-list-font">热销榜单</text>
					<view class="more" @click="hotList">
						<text class="hot-list-more">更多</text>
						<u-icon name="arrow-right" size="20"></u-icon>
					</view>
				</view>
				<view class="hot-list-content">
					<u-scroll-list>
						<view v-for="(item, index) in hotlistData" :key="index" @click="productDetails">
							<image :src="item.thumb" class="hot-list-image"></image>
							<text>{{ item.name }}</text><br />
							<text class="hot-list-price">{{ item.reduced }}</text>
							<text class="hot-list-original">{{ item.original }}</text>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<!-- 新品推荐 -->
			<view class="recommend">
				<text class="recommend-title">新品推荐</text>
				<view class="recommend-content" v-for="(item,index) in recommendData" :key="index"
					@click="recommendDetails">
					<view class="recommend-left">
						<image :src="item.src" class="recommend-image"></image>
					</view>
					<view class="recommend-right">
						<view>{{ item.name }}</view>
						<view class="recommend-price">{{ item.original }} <text
								class="purchase">{{ item.purchase }}</text>
						</view>
						<view class="recommend-price-red">
							<view>
								{{ item.price }}
							</view>
							<button class="recommend-button">去购买</button>
						</view>
					</view>
				</view>
				<view class="hot-list-foot" @click="recommend">
					<text>查看更多</text>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
			</view>
			<!-- 好物优选 -->
			<view class="stuff-optimization">
				<view class="stuff-title">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
						<view class="" style="flex-shrink: 0;display: flex;">
							<view class="stuff-title-font" v-for="(item,index) in optimizationData" :key="index"
								@click="changeStyle(index)">
								<view class="stuff-title-top"
									:class="optimization == index? 'stuff-title--top-active' : 'stuff-title-top' ">
									{{ item.topfont }}
								</view>
								<view class="stuff-title-bottom"
									:class="optimization == index? 'stuff-title-bottom-active' : 'stuff-title-bottom' ">
									{{ item.bottomfont }}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="stuff-content">
					<view class="stuff-content-box" v-for="(item,index) in stuffData" :key="index" @click="goodPreferred">
						<image :src="item.src" class="stuff-content-image"></image>
						<view class="commodity-product">{{ item. name}}</view>
						<view>
							<text class="stuff-content-fontleft">￥{{ item.discount }}</text>
							<text class="stuff-content-fontright">￥{{ item.original }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 限时秒杀状态值
				state: '0',
				// 好物优选
				optimization: '0',
				// 顶部栏搜索框绑定的数据
				InquireData: '',
				// 导航栏数据
				navigationData: [{
						id: 1,
						name: '首页'
					},
					{
						id: 2,
						name: '01-羊脂白玉'
					},
					{
						id: 3,
						name: '02-白玉'
					},
					{
						id: 4,
						name: '03-糖玉'
					},
					{
						id: 5,
						name: '04-黄玉'
					},
					{
						id: 6,
						name: '05-碧玉'
					},
					{
						id: 7,
						name: '06-墨玉'
					},
					{
						id: 8,
						name: '07-青白玉'
					},
				],
				carouselData: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				activityData: [{
						id: 1,
						src: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						font: '限时秒杀',
						url: '/pages/index/seckill/seckill'
					},
					{
						id: 2,
						src: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						font: '热销榜单',
						url: '/pages/index/hotList/hotList'
					},
					{
						id: 3,
						src: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						font: '新品推荐',
						url: '/pages/index/recommend/recommend'
					},
					{
						id: 4,
						src: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						font: '店铺街',
						url: '/pages/index/shop/shop'
					},
					{
						id: 5,
						src: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						font: '领卷中心',
						url: '/pages/index/collarvolume/collarvolume'

					},
					{
						id: 6,
						src: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						font: '我的收藏',
						url: '/pages/index/collection/collection'

					},
					{
						id: 7,
						src: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						font: '商城咨询',
						url: '/pages/index/consultation/consultation'
					},
					{
						id: 8,
						src: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						font: '帮助中心',
						url: '/pages/index/help/help'
					},
					{
						id: 9,
						src: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						font: '积分签到',
						url: '/pages/index/signin/signin'
					},
					{
						id: 10,
						src: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						font: '积分商城',
						url: '/pages/index/pointsmall/pointsmall'
					},
				],
				// 限时秒杀时间数据
				spiketimeData: [{
						time: '09:00'
					},
					{
						time: '13:00'
					},
				],
				// 热销榜单数据
				hotlistData: [{
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg",
					name: '1000克',
					reduced: '￥50',
					original: '￥50',
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/2.jpg",
					name: '1000克',
					reduced: '￥50',
					original: '￥50',
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/3.jpg",
					name: '1000克',
					reduced: '￥50',
					original: '￥50',
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/4.jpg",
					name: '1000克',
					reduced: '￥50',
					original: '￥50',
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/5.jpg",
					name: '1000克',
					reduced: '￥50',
					original: '￥50',
				}],
				recommendData: [{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						name: '测试测试',
						original: '原价￥20',
						price: '￥20',
						purchase: '1人购买'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: '测试测试',
						original: '原价￥20',
						price: '￥20',
						purchase: '1人购买'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						name: '测试测试',
						original: '原价￥20',
						price: '￥20',
						purchase: '1人购买'
					},
				],
				optimizationData: [{
						topfont: '好物优选',
						bottomfont: '精选推荐'
					},
					{
						topfont: '新品好物',
						bottomfont: '24小时热销'
					},
					{
						topfont: '海外进口',
						bottomfont: '国际进口商品'
					},
					{
						topfont: '热销榜单',
						bottomfont: '热销榜单'
					},
					{
						topfont: '测试001',
						bottomfont: '123'
					},
				],
				// 好物优选商品数据
				stuffData: [{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'Samsung SM-N9860 骁龙865+三星note20官方旗...',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
					{
						src: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						name: 'iphone12mini',
						discount: '4369',
						original: '7760'
					},
				]
			}
		},
		methods: {
			// 超值秒杀点击事件
			spikes(index) {
				this.state = index
			},
			// 好物优选点击亮高
			changeStyle(index) {
				this.optimization = index
			},
			// 菜单分类点击跳转
			menuClikItem(item, index) {
				uni.navigateTo({
					url: item.url
				});
			},
			// 新品推荐跳转
			recommend() {
				uni.navigateTo({
					url: '/pages/index/recommend/recommend'
				})
			},
			// 商城头条跳转
			consulting() {
				uni.navigateTo({
					url: '/pages/index/consultation/consultation'
				})
			},
			// 热销榜单点击更多跳转热销榜单页面
			hotList() {
				uni.navigateTo({
					url: '/pages/index/hotList/hotList'
				})
			},
			// 热销榜单商品跳转商品详情页面
			productDetails() {
				uni.navigateTo({
					url: '/pages/index/productDetails/productDetails'
				})
			},
			// 大额红包跳转领卷中心页面
			rollCollar() {
				uni.navigateTo({
					url: '/pages/index/collarvolume/collarvolume'
				})
			},
			// 超值秒杀跳转限时秒杀页面
			greatSpikes() {
				uni.navigateTo({
					url: '/pages/index/seckill/seckill'
				})
			},
			// 新品推荐点击商品跳转商品详情
			recommendDetails() {
				uni.navigateTo({
					url: '/pages/index/productDetails/productDetails'
				})
			},
			// 好物优选商品跳转商品详情
			goodPreferred(){
				uni.navigateTo({
					url:'/pages/index/productDetails/productDetails'
				})
			},
			// 顶部搜索框跳转搜索页面
			searchArea(){
				uni.navigateTo({
					url:'/pages/index/searchArea/searchArea'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.spikes-come {
		color: #ccc;
		text-align: center;
	}

	.spikes-time {
		width: 150rpx;
		text-align: center;
	}

	.spikex-time {
		color: red;
	}

	.come {
		background-color: red;
		border-radius: 30rpx;
		color: white;
		width: 150rpx;
		text-align: center;
	}

	.content {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		justify-content: center;
		background: linear-gradient(#F16D78, white, white);
		padding: 0rpx 0rpx 30rpx 20rpx;
	}
	
	.header{
		position: fixed;
		top: 0;
		z-index: 100;
		background-color: #F16D78;
	}

	.search {
		width: 75%;
		border-radius: 40rpx;
		margin-top: 20rpx;
	}

	.navigation-bar {
		width: 100%;
		margin-top: 30rpx;
	}

	.navigation {
		width: 100%;
		margin-right: -60rpx;
	}

	.navigation-classify {
		display: flex;
		align-items: center;
		background-color: #F7ABB2;
		color: #fff;
		border-radius: 40rpx 0rpx 0rpx 40rpx;
		padding: 10rpx;
	}

	.classify {
		font-size: 30rpx;
	}

	.content-padding {
		margin-top: 260rpx;
		padding-right: 20rpx;
	}

	.carousel {
		width: 100%;
	}

	.activity {
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.image-box {
			width: 19%;
			margin: 0.5%;
			text-align: center;
			display: inline-block;
		}
	}

	.image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
	}

	.red-envelope {
		width: 100%;
	}

	.img-radenvelope {
		width: 100%;
		height: 200rpx;
		border-radius: 100rpx;
		margin-top: 20rpx;
	}

	.shopping-centre {
		width: 94%;
		margin-top: 20rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 20rpx 0rpx 20rpx;
	}

	.mall-headlines {
		font-weight: bold;
	}

	.mall-headlines {
		font-weight: bold;
		font-style: oblique;
	}

	.headlines {
		color: red;
	}

	.partition {
		margin-left: 20rpx;
		color: #ccc;
	}

	.headlines-content {
		margin-left: 5%;
	}

	.great-spikes {
		width: 100%;
		background-color: #fff;
		border: 1px solid red;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.spikes-title {
		width: 100%;
		height: 80rpx;
		background-color: red;
		color: white;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.value-spikes {
		font-size: 50rpx;
	}

	.ended {
		color: white;
		margin-left: 380rpx;
	}

	.spikes-content {
		height: 120rpx;
		font-size: 40rpx;
		display: flex;
		padding: 20rpx 20rpx 20rpx 20rpx;
		margin-bottom: 20rpx;
	}

	.conatent-box {
		margin-right: 80rpx;
	}

	.spikes-bottom {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
	}

	.hot-list {
		width: 100%;
		margin-top: 20rpx;
		background: linear-gradient(#FDE7E9, #FDE7E9, white);
		padding: 20rpx;
	}

	.hot-list-title {
		display: flex;
	}

	.hot-list-font {
		font-size: 40rpx;
		font-weight: bold;

	}

	.more {
		display: flex;
		align-items: center;
	}

	.hot-list-more {
		font-size: 35rpx;
		margin-left: 420rpx;
	}

	.hot-list-content {}

	.hot-list-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.hot-list-price {
		color: red;
	}

	.hot-list-original {
		color: #ccc;
	}

	.recommend {
		width: 100%;
		background: linear-gradient(#FFF2DE, white, white);
		padding: 20rpx 20rpx 20rpx 20rpx;
	}

	.recommend-title {
		font-size: 40rpx;
		font-weight: bold;
		display: flex;
	}

	.recommend-content {
		height: 255rpx;
		margin-top: 20rpx;
		display: flex;
	}

	.recommend-left {
		width: 250rpx;
	}

	.recommend-image {
		width: 250rpx;
		height: 250rpx;
		border-radius: 20rpx;
		display: inline-block;
	}

	.recommend-right {
		width: 100%;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}


	.recommend-price {
		color: #ccc;
	}

	.recommend-price-red {
		color: red;
		display: flex;
	}

	.recommend-button {
		background-color: red;
		color: white;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 50rpx;
		margin-left: 200rpx;
	}

	.purchase {
		margin-left: 180rpx;
	}

	.hot-list-foot {
		width: 100%;
		height: 60rpx;
		margin-top: 20rpx;
		border-top: 1px solid #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.stuff-optimization {
		width: 100%;
	}

	.stuff-title {
		width: 100%;
		display: flex;
	}

	.stuff-title-font {
		margin-right: 5%;
	}

	.stuff-title-top {
		font-size: 40rpx;
		text-align: center;
	}

	.stuff-title--top-active {
		font-weight: bold;
		background: linear-gradient(red, white, white);
	}

	.stuff-title-bottom {
		text-align: center;
		color: #ccc;
	}

	.stuff-title-bottom-active {
		color: black;
	}

	.stuff-content {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #F6F6F6;

	}

	.stuff-content-box {
		width: 48%;
		background-color: #fff;
		margin: 20rpx 0 0 0;
	}

	.commodity-product {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.stuff-content-image {
		width: 100%;
	}

	.stuff-content-fontleft {
		color: red;
		font-size: 30rpx;
	}

	.stuff-content-fontright {
		color: #ccc;
		text-decoration: line-through;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
</style>